<template>
	<PageWrap :title="lineData.productName">
		<div class="page-index">
			<div class="bg">
				<div class="bg-img" />
			</div>
			<div class="des">
				<div class="menu-wrap">
					<div class="group">
						<div class="group-title">
							<span>工序</span>
							<u-button class="uni-button" style="width:200rpx;height: 70rpx;" type="success"
								@click="clickBack">
								返回首页
							</u-button>
						</div>
						<div class="array">
							<div class="item" v-for="item in proRouteProcesses" :key="item.processId">
								<div class="item-l" @click="clickItem(item)">
									<div class="span-content">
										<div class="span">
											<span class="mr-1">{{ item.processName }}</span>
										</div>
										<div class="subspan">
											{{ item.processCode }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</PageWrap>
</template>

<script>
	import PageWrap from "./components/page-wrap";

	export default {
		components: {
			PageWrap
		},
		data() {
			return {
				primaryColor: "black",
				project: "EMS",
				// 所有菜单
				menuList: [

				],
				// 产线数据
				lineData: null,
				// 工序设置
				proRouteProcesses: []
			};
		},
		computed: {},
		mounted() {},

		//新页面接收后：
		onLoad(options) {
			this.lineData = JSON.parse(options.processdata)
			console.log('processdata', this.lineData)
			// vuex_BomId
			this.$u.vuex('vuex_BomId', this.lineData.bomId);
			this.$u.api.getRouteproduct(this.lineData.recordId).then(res=>{
				this.proRouteProcesses = res.data.proRouteProcesses;
			})
		},
		methods: {
			clickBack() {

				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			// 点击菜单
			clickItem(item) {
				// let data = {
				// 	lineData:this.lineData,
				// 	stationData:item
				// };
				// uni.navigateTo({
				// 	url: '/pages/index/reason?fatherData=' + JSON.stringify(data)
				// });
				uni.navigateTo({
					url: '/pages/index/reportProductio/index?processData=' + JSON.stringify(item)
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page-index {
		position: relative;
		//   width: 100vw;
		//   height: 100vh;
		color: black;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.des {
		position: relative;
		z-index: 10;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.item {
		position: relative;
		width: 20%;
		box-sizing: border-box;
		height: 146px;
		padding: 10px;
		padding-left: 30px;
		padding-right: 10px;
		border: solid 1px #fff;
		background: linear-gradient(180deg,
				#ffffff 0%,
				#ffffff 0.01%,
				#ffffff 119.85%);
		border-radius: 4px;
		margin: 0 18px;
		margin-bottom: 24px;
		overflow: hidden;
		display: flex;

		&:active {
			border-color: #fff;
		}

		.item-l {
			height: 100%;
			flex: auto;
			display: flex;
			flex-direction: column;

			.icon-bottom {
				width: 38.59px;
				height: 4px;
				background: inear-gradient(270deg, #ebedf0 2.78%, #edeff1 100%);
				border-radius: 4px;
			}

			.span-content {
				flex: auto;
			}

			.subspan {
				color: #aaa;
				font-size: 14px;
				line-height: 30px;
			}

			.span {
				display: flex;
				flex: auto;
				align-items: flex-start;
				padding-top: 10px;
				font-weight: 400;
				font-size: 20px;
				line-height: 32px;
			}
		}
	}

	.menu-icon-bg {
		position: absolute;
		z-index: 2;
		// outline: solid 1px red;
		right: -40px;
		top: -16px;
	}

	.menu-wrap {
		padding: 40rpx 50rpx;
	}

	.item-r {
		position: absolute;
		height: 40px;
		top: 0;
	}

	.menu-icon {
		width: 144px;
		height: 144px;
		display: block;
		z-index: 10;
	}

	.star-button {
		width: 30px;
		height: 30px;
		text-align: right;
		position: relative;
		z-index: 30;
	}

	.mr-1 {
		margin-right: 4px;
	}

	.menu-list {
		max-width: 100%;
		width: 100%;
		padding: 0 10px;
	}

	.group {}

	.array {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -16px;
	}

	.group-title {
		font-size: 20px;
		line-height: 32px;
		margin-bottom: 16px;
		font-weight: 500;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;

		.bg-img {
			height: 100%;
			width: 100%;
			background-color: #aaa;
			background-size: 100%;
		}
	}

	.banner-span {
		height: 310px;
		padding-top: 120px;
		box-sizing: border-box;
	}
</style>